<template>
  <view class="product-detail-page">
    <!-- 商品图片轮播 -->
    <view class="product-gallery">
      <swiper class="gallery-swiper" :indicator-dots="true" :autoplay="false">
        <swiper-item v-for="(image, index) in product.images" :key="index">
          <image :src="image" class="gallery-image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品基本信息 -->
    <view class="product-info-card">
      <view class="price-section">
        <view class="current-price">
          <text class="price-symbol">¥</text>
          <text class="price-number">{{ product.salePrice }}</text>
        </view>
      </view>
      
      <text class="product-title">{{ product.productName }}</text>
      <text class="product-subtitle">{{ product.productDesc }}</text>
    </view>

    <!-- 数量选择 -->
    <view class="quantity-card">
      <view class="card-title">
        <text class="title-text">购买数量</text>
      </view>
      
      <view class="quantity-selector">
        <view class="quantity-btn" :class="{ disabled: quantity <= 1 }" @tap="decreaseQuantity">
          <text class="btn-text">-</text>
        </view>
        <input class="quantity-input" type="number" v-model="quantity" @input="onQuantityChange" />
        <view class="quantity-btn" :class="{ disabled: quantity >= 99 }" @tap="increaseQuantity">
          <text class="btn-text">+</text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail-card">
      <view class="card-title">
        <text class="title-text">商品详情</text>
      </view>
      
      <view class="detail-content">
        <text class="detail-text">{{ product.productDesc || '暂无详细描述' }}</text>
        
        <!-- 详情图片 -->
        <view class="detail-images" v-if="product.detailImages">
          <image 
            v-for="(image, index) in product.detailImages" 
            :key="index"
            :src="image" 
            class="detail-image" 
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-btn buy-btn" @tap="buyNow">
        <text class="btn-text">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/utils/api'
import { BASE_URL } from '@/utils/config.js'
// 响应式数据
const product = ref({})
const currentImageIndex = ref(0)
const loading = ref(false)
const productId = ref('')
const buyNowMode = ref(false)
const quantity = ref(1)

const decreaseQuantity = () => {
  quantity.value = quantity.value - 1
}

const increaseQuantity = () => {
  quantity.value = quantity.value + 1
}

// 加载商品详情
const loadProductDetail = async (id) => {
  loading.value = true
  try {
    const productDataResp = await api.product.getProductDetail(id)
    console.log('商品详情：', productDataResp)
    
    if (productDataResp.code === 0) {
      const data = productDataResp.data
      product.value = {
        ...data,
        // 处理图片URL
        images: data.imageList ? data.imageList.split(',').map(img => BASE_URL + img) : [BASE_URL + data.mainImage],
        detailImages: data.detailImages ? data.detailImages.split(',').map(img => BASE_URL + img) : [],
      }
      // 如果没有轮播图，使用主图
      if (!product.value.images || product.value.images.length === 0) {
        product.value.images = [BASE_URL + data.mainImage]
      }
      
    } else {
      throw new Error(productDataResp.msg || '商品不存在')
    }
    
  } catch (error) {
    console.error('加载商品详情失败:', error)
    uni.showToast({
      title: error.message || '加载失败',
      icon: 'none'
    })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } finally {
    loading.value = false
  }
}

// 立即购买
const buyNow = () => {
  // 跳转到订单确认页面
  const orderData = {
    ...product.value,
    quantity: quantity.value,
    image: product.value.images[0],
  }
  
  uni.navigateTo({
    url: `/pages/order/confirm?data=${encodeURIComponent(JSON.stringify(orderData))}`
  })
}



// 生命周期
onLoad((options) => {
  if (options.id) {
    productId.value = options.id
    loadProductDetail(options.id)
  } else {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
  
  if (options.buyNow === 'true') {
    buyNowMode.value = true
  }
})
</script>

<style scoped>
.product-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 80px;
}

/* 商品图片轮播 */
.product-gallery {
  position: relative;
  height: 375px;
  background: white;
}

.gallery-swiper {
  width: 100%;
  height: 100%;
}

.gallery-image {
  width: 100%;
  height: 100%;
}

.gallery-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #FF6B6B 0%, #ee5a52 100%);
  border-radius: 12px;
  padding: 6px 12px;
  z-index: 10;
}

.badge-text {
  font-size: 12px;
  color: white;
  font-weight: bold;
}

/* 商品信息卡片 */
.product-info-card {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.current-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 16px;
  color: #FF6B6B;
  font-weight: bold;
}

.price-number {
  font-size: 28px;
  color: #FF6B6B;
  font-weight: bold;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.product-title {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.product-subtitle {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.4;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag {
  background: #FFF8E1;
  color: #FFB800;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #FFE082;
}

.product-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  font-size: 14px;
  color: #666;
}

/* 规格选择 */
.spec-card,
.quantity-card,
.detail-card {
  background: white;
  margin-bottom: 12px;
  padding: 20px;
}

.card-title {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.spec-option {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 80px;
  text-align: center;
  transition: all 0.3s ease;
}

.spec-option.active {
  border-color: #FFB800;
  background: #FFF8E1;
}

.spec-name {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.spec-price {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #FF6B6B;
}

/* 数量选择 */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 0.3s ease;
}

.quantity-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.quantity-btn:active {
  background: #f5f5f5;
}

.btn-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.quantity-input {
  width: 80px;
  height: 40px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
}

/* 商品详情 */
.detail-content {
  
}

.detail-text {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.detail-images {
  
}

.detail-image {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 8px;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 12px;
  z-index: 100;
}

.action-btn {
  border-radius: 24px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.buy-btn {
  flex: 1;
  background: linear-gradient(135deg, #FFB800 0%, #FFA000 100%);
  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
}

.buy-btn .btn-text {
  font-size: 16px;
  color: white;
  font-weight: bold;
}

.buy-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(255, 184, 0, 0.3);
}
</style>